<template>
  <page-header-wrapper>
    <a-spin :spinning="loading" tip="加载中...">
      <a-row :gutter="15">
        <a-col :span="8">
          <a-card class="card-margin" title="CPU信息" :bordered="false">
            <a-table :size="tableSize" :columns="columns" :data-source="cpuData" :pagination="false" :bordered="tableBordered"></a-table>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card class="card-margin" title="内存信息" :bordered="false">
            <a-table :size="tableSize" :columns="columns" :data-source="memData" :pagination="false" :bordered="tableBordered"></a-table>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card class="card-margin" title="Java虚拟机信息" :bordered="false">
            <a-table :size="tableSize" :columns="columns" :data-source="jvmData" :pagination="false" :bordered="tableBordered"></a-table>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card class="card-margin" title="服务器信息" :bordered="false">
            <a-table :size="tableSize" :columns="sysColumns" :data-source="sysData" :pagination="false" :bordered="tableBordered"></a-table>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card class="card-margin" title="磁盘信息" :bordered="false">
            <a-table :size="tableSize" :columns="sysFileColumns" :data-source="sysFileData" :pagination="false" :bordered="tableBordered"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import {tableMixin} from '@/store/table-mixin'
import {getInfoServer} from '@/api/monitor/serverMonitor'

export default {
  mixins: [tableMixin],
  data() {
    return {
      loading: true,
      columns: [
        {dataIndex: 'name', title: '属性名', align: 'center'},
        {dataIndex: 'value', title: '属性值', align: 'center'}
      ],
      cpuData: [],
      memData: [],
      sysData: [],
      sysColumns: [],
      jvmData: [],
      sysFileColumns: [],
      sysFileData: []
    }
  },
  mounted() {
    getInfoServer().then(res => {
      const {cpu, mem, jvm, sys, sysFiles} = res.data
      this.cpuData = [
        {name: '核心数', value: cpu.cpuNum + '核'},
        // {name: 'CPU总使用率', value: cpu.total + '%'},
        // {name: 'CPU系统使用率', value: cpu.sys + '%'},
        {name: 'CPU用户使用率', value: cpu.used + '%'},
        {name: 'CPU当前等待率', value: cpu.wait + '%'},
        {name: 'CPU当前空闲率', value: cpu.free + '%'}
      ]
      this.memData = [
        {name: '内存总量', value: mem.total + 'G'},
        {name: '已用内存', value: mem.used + 'G'},
        {name: '剩余内存', value: mem.free + 'G'},
        {name: '使用率', value: mem.usage + '%'}
      ]
      this.jvmData = [
        {name: 'JDK版本', value: jvm.version},
        {name: 'JVM空闲内存', value: jvm.free + 'M'},
        {name: '当前JVM占用的内存总数', value: jvm.total + 'M'},
        {name: 'JVM最大可用内存总数', value: jvm.max + 'M'}
        // {name: 'JDK路径', value: jvm.home},
      ]
      this.sysColumns = [
        {dataIndex: 'osName', title: '操作系统', align: 'center'},
        {dataIndex: 'osArch', title: '系统架构', align: 'center'},
        {dataIndex: 'computerName', title: '服务器名称', align: 'center'},
        {dataIndex: 'computerIp', title: '服务器Ip', align: 'center'},
        {dataIndex: 'userDir', title: '项目路径', align: 'center'}
      ]
      this.sysData = [{
        osName: sys.osName,
        osArch: sys.osArch,
        computerName: sys.computerName,
        computerIp: sys.computerIp,
        userDir: sys.userDir
      }]
      this.sysFileColumns = [
        {dataIndex: 'dirName', title: '盘符路径', align: 'center'},
        {dataIndex: 'sysTypeName', title: '盘符类型', align: 'center'},
        {dataIndex: 'typeName', title: '文件类型', align: 'center'},
        {dataIndex: 'total', title: '总大小', align: 'center'},
        {dataIndex: 'free', title: '剩余大小', align: 'center'},
        {dataIndex: 'used', title: '已经使用量', align: 'center'},
        {dataIndex: 'usage', title: '资源的使用率', align: 'center'}
      ]
      this.sysFileData = sysFiles
      this.$message.success(res.msg)
      this.loading = false
    })
  }
}
</script>
<style scoped>
.card-margin {
  margin-bottom: 15px;
}
</style>
